<!DOCTYPE HTML>
<html lang="zh-cn">

<head>
    <meta charset="utf-8" />
    <!--<meta http-equiv="X-UA-Compatible" content="IE=edge">-->
    <!--<meta content="width=device-width,initial-scale=1.0" name="viewport">-->
    <!--<meta content="yes" name="apple-mobile-web-app-capable">-->
    <!--<meta content="black" name="apple-mobile-web-app-status-bar-style">-->
    <!--<meta content="telephone=no" name="format-detection">-->
    <!--<meta content="email=no" name="format-detection">-->
    <title>系统管理</title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css" type="text/css">
    <link rel="stylesheet" href="../bootstrap/css/bootstrap-table.css" type="text/css">
    <!--<link rel="stylesheet" href="https://cdn.bootcss.com/jquery-treegrid/0.2.0/css/jquery.treegrid.min.css" type="text/css">-->
    <link rel="stylesheet" href="../treegrid/css/jquery.treegrid.css">
</head>

<body>
<div class="container">
    <h1>Table Treegrid</h1>
    <table id="table"></table>
</div>
</body>
<script src="../js/jquery-2.2.4.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
<script src="../bootstrap/js/bootstrap-table.js"></script>
<script src="../treegrid/js/jquery.treegrid.js"></script>
<script src="../bootstrap-table-treegrid.js"></script>


<!--<script src="https://cdn.bootcss.com/jquery-treegrid/0.2.0/js/jquery.treegrid.min.js"/>-->
<script type="text/javascript">

    var $table = $('#table');
debugger;
    $(function() {
        $('#table').bootstrapTable({
            url: '../json/treegrid.json',
            height: $(window).height(),
            striped: true,
            sidePagination: 'server',
            idField: 'id',
            search:true,
            columns: [
                {
                    field: 'ck',
                    checkbox: true
                },
                {
                    field: 'name',
                    title: '名称'
                },
                // {field: 'id', title: '编号', sortable: true, align: 'center'},
                // {field: 'pid', title: '所属上级'},
                {
                    field: 'status',
                    title: '状态',
                    sortable: true,
                    align: 'center',
                    formatter: 'statusFormatter'
                },
                {
                    field: 'permissionValue',
                    title: '权限值'
                }
            ],
            // bootstrap-table-tree-column.js 插件配置
            // treeShowField: 'name',
            // parentIdField: 'pid'
            // bootstrap-table-tree-column.js 插件配置

            // bootstrap-table-treegrid.js 插件配置
            treeShowField: 'name',
            parentIdField: 'pid',
            onLoadSuccess: function(data) {
                console.log('load');
                // jquery.treegrid.js
                $table.treegrid({
                    // initialState: 'collapsed',
                    treeColumn: 1,
                    // expanderExpandedClass: 'glyphicon glyphicon-minus',
                    // expanderCollapsedClass: 'glyphicon glyphicon-plus',
                    onChange: function() {
                        $table.bootstrapTable('resetWidth');
                    }
                });
            }
            // bootstrap-table-treetreegrid.js 插件配置
        });
//
//    setTimeout(function() {
//      debugger;
//      $(document).off('click', "input[name='btSelectItem']");
//      $(document).on('click', "input[name='btSelectItem']", associatedChoose);
//    },500);
    });


    // 格式化类型
    function typeFormatter(value, row, index) {
        if (value === 'menu') {
            return '菜单';
        }
        if (value === 'button') {
            return '按钮';
        }
        if (value === 'api') {
            return '接口';
        }
        return '-';
    }

    // 格式化状态
    function statusFormatter(value, row, index) {
        if (value === 1) {
            return '<span class="label label-success">正常</span>';
        } else {
            return '<span class="label label-default">锁定</span>';
        }
    }

    function associatedChoose() {
        alert(123)
        debugger
    }

</script>

</html>
